<template>
	<view class="">
		<z-paging :fixed="true" :refresherEnabled="true"  ref="paging"
			v-model="userList" @query="queryList" :loadingMoreCustomStyle="{paddingBottom:'30rpx'}">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<view class="container">
				<view v-for="(item,index) in userList" :key="index" class="row row-item" >
					<image :src="item.wxHeadimgurl||'/static/user-my.jpg'" mode=""></image>
					<view class="column" >
						<view class="row" style="margin-left: 30rpx;">
							<text>{{item.wxNickname}}</text>
							<view class="row align-items-center" :class="item.wxSex==1?'gender-male':'gender-female'"
								style="width: 40rpx;height: 40rpx;border-radius: 50%;margin-left: 20rpx;">
								<zywork-icon :type="item.wxSex ==1?'icon-nan':'icon-nv'" color="#ffffff" size="30"></zywork-icon>
							</view>
						</view>
						<view class="row" style="margin-left: 30rpx;margin-top: 15rpx;">
							<text>{{item.wxProvince||'暂无'}}</text>
							<text style="margin-left: 10rpx;">{{item.wxCity||'暂无'}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</z-paging>
		
		<!-- <view class="" style="padding: 30rpx 30rpx;background-color: #fafafa;">
			<view class="row" >
				<picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="row" style="align-items: center;">
						<view >{{date}}</view>
						<zywork-icon type="icon-xia-"></zywork-icon>
					</view>
				</picker>
			</view>
			<view class="row" style="align-items: center;margin-top: 40rpx;">
				<text class="">
					支出：0.00
				</text>
				<text class="" style="margin-left: 70rpx;">
					收入：0.00
				</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				userList:[
					{
						wxHeadimgurl:"/static/user-my.jpg",
						name:"小王",
						wxSex:1
					}
				]
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				console.log(pageNo)
				const params = {
					pageNum: pageNo,
					pageSize: pageSize
				}
				this.$util.doPostJson("/extension/alreadyRecommender", params, {}, true).then(res => {
					console.log(res.data)
					if(res.data.code = this.$ResponseStatus.OK){
						this.$refs.paging.complete(res.data.data.list);
					}else {
						this.$refs.paging.complete([]);
					}
					this.firstLoaded = true;
				}).catch(error => {
					console.log(error)
					uni.hideLoading()
				})
				
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			}
		},
		onNavigationBarButtonTap(e) {
			console.log("搜索")
		}
	}
</script>

<style lang="scss">
	.row{
		display: flex;
		flex-direction: row;
		
		text{
			color: #8B8B8B;
		}
	}
	page{
		background-color: #F8F9F9;
	}
	.container{
		padding: 10rpx 35rpx;
	}
	.row-item{
		background-color: #FFFFFF;
		border-radius: 35rpx;
		padding: 20rpx 30rpx;
		margin: 20rpx 0rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
</style>
